<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>VUE练习（JinYuan Zhang）</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
        <style>
            .fade-enter-active, .fade-leave-active {
                transition: opacity 2s
            }
            .fade-enter, .fade-leave-to {
                opacity: 0
            }
        </style>

	</head>
	<body> 
		<div id="myVue">
			<!-- 单向绑定 -->
			<h4 style="text-align: center; color: red">{{title}}</h4>
			<p v-html="htmlString"></p>
			<p>
				<label>用户Id:</label>
				<input type="text" :value="'userId_'+ user.id" />
			</p>
			<p>
				<label>用户名：</label>
				<input type="text" v-bind:value="user.userName" />
                <p>{{capitalize}}</p>
			</p>
            <p>
                <label>密码：</label>
                <input type="password" :value="user.password" />
            </p>
            <p :style="{color:color}">用户名:{{user.userName | filter1 | filter2}}</p>
			<p :style="style">用户名:{{user.userName}}</p>
            <p>年龄：{{user.age}}</p>

            <!-- 监听器 -->
            <p>
                <label >Title:</label>
                <input type="text" v-model="title">
            </p>
            <p>
                <label >用户名:</label>
                <input type="text" v-model="user.userName">
            </p>
            <p>
                <span style="color: red;">{{error}}</span>
            </p>

            <!-- 事件绑定 -->
            <p>
                <button @click="user.age += 1">按钮1</button>
                <button @click="test1()">按钮2</button>
                <button @click="test2('JinYuanZhang', $event)" name="btn2" value="11111" myData="JinYuanZhang">按钮3</button>

            </p>

            <!-- 动画过度 -->
            <button @click="show = !show">按钮4</button>
            <transition name="fade">
                <p v-show = 'show'>动画效果</p>
            </transition>
            <!-- 双向绑定 -->
            <p>
                <label>用户名:</label>
                <input type="text" v-model.trim="user.userName">
            </p>
            <p>
                <label>密码:</label>
                <input type="password" v-model="user.password">
            </p>
            <p>
                <label>年龄:</label>
                <input type="text" v-model.number="user.age">
            </p>


			<!-- 条件渲染 -->
			<p>
				<span v-if="user.age>18"> 成年人 </span>
				<span v-else>儿童</span>
			</p>
			<p>
				<span v-show="show">我是一个框框</span>
			</p>

            <!-- 循环渲染 -->
            <p>
                <ul>
                    <li v-for="item in roles" :key="item.id">
                        {{item.roleName}}
                    </li>
                </ul>
            </p>
            <p>
                <ul>
                    <li v-for="(item, index) in roles":key="item.id">
                        {{index}}_{{item.roleName}}
                    </li>
                </ul>
            </p>
            <p>
                <select>
                    <option v-for="(item,index) in roles" :key='item.id' :value='item.id'>
                        {{item.roleName}}
                    </option>
                </select>
            </p>
            <p>
                <table>
                    <tr>
                        <td>ID</td>
                        <td>RoleName</td>
                    </tr>
                    <tr v-for="(item, index) in roles":key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.roleName}}</td>
                    </tr>
                </table>
            </p>
		</div>

		<script>
            $(function(){
                test4();
            })
            Vue.filter('filter2', function(value){
                if(!value){
                            return ''
                        }
                        return value.replace('c', '*')
            })
			var myVue = new Vue({
				el: "#myVue",
				data: {
					title: "This is Vue Test Page",
                    show:false,
					color: "blue",
                    error:"",
					style: { color: "yellow" },
					htmlString: "<span style='color:red;'>我爱你中国</span>",
					user: {
						id: 1,
						userName: "JinYuanZhang",
						age: 20,
						password: "111111",
						gender: "male",
					},
					roles: [
						{ id: 1, roleName: "admin" },
						{ id: 2, roleName: "manager" },
						{ id: 3, roleName: "staff" },
					],
				},
                methods: {
                    test1:function(){
                        console.log("This is test 1 function")
                    },
                    test2:function(name, event){
                        console.log(name)
                        //event 原生DOM事件
                        if (event){
                            var target = event.currentTarget;
                            // 标签自带属性取法
                            console.log(target.name);
                            console.log(target.value);
                            // 目标对象自定义属性取法
                            console.log(target.attributes.getNamedItem("myData").name);
                            console.log(target.attributes.getNamedItem("myData").value);
                        }
                    },
                    test3:function(){
                        console.log('挂载生命周期1')
                    },
                    test4:function(){
                        console.log('挂载生命周期2')
                    },
                    getUserById:function(){
                        var self = this;
                        $.ajax({
                            url:'http://www.sfac.xyz/api/user/1',
                            type:'get',
                            success:function(rs){
                                self.user = rs
                            },
                            error:function(rs){
                                console.log(rs)
                            }
                        }) 
                    }
                },
  
                watch: {
                    //监听一级属性
                    title(newValue, oldValue){
                        this.error = newValue.length >6 ? '太长了': "";
                    },
                    //监听对象属性
                    'user.userName'(newValue, oldValue){
                        this.error = this.user.userName.length >6 ? '用户名长度大于6': "合格";
                    }
                },

                computed: {
                    capitalize:function(){
                        return this.user.userName[0].toUpperCase() + this.user.userName.substr(1);
                    }
                },

                filters: {
                    //局部过滤器
                    filter1:function(value){
                        if(!value){
                            return ''
                        }
                        return value.replace('a', '-')
                    }
                },

                created () {
                    //通过created生命周期，将vue实例定义的test4方法，赋值给window test4 函数
                    window.test4 = this.test4;
                },

                mounted () {
                    this.test3();
                    this.getUserById();
                }
			});
		</script>
	</body>
</html>
